<template>
  <div>
    <el-row>
      <el-col :span="3"> <p>高级查询</p></el-col>
    </el-row>

    <el-row>
      <el-col :span="5">
        <el-input v-model="search.name" placeholder="文章标题"></el-input>
      </el-col>
      <el-col :span="5">
        <el-select v-model="search.plate" placeholder="请选择所属板块">
          <el-option label="新闻动态" value="新闻动态"></el-option>
          <el-option label="平台公告" value="平台公告"></el-option>
        </el-select>
      </el-col>

      <el-date-picker
        v-model="search.dateRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="请选择发布日期"
        end-placeholder="请选择发布日期"
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="dateFormat"
      >
      </el-date-picker>
    </el-row>

    <div class="d2">
      <el-col :span="12">
        <el-button
          class="btn1"
          type="success"
          icon="el-icon-search"
          @click="select()"
          >查询</el-button
        ></el-col
      >
    </div>
    <div class="d2">
      <el-col :span="12">
        <el-button class="btn1" type="danger" @click="add()"
          >发布资讯</el-button
        ></el-col
      >
    </div>
    <!-- 添加权限弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="请输入编号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="文章标题">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="所属板块">
           <el-select v-model="form.plate" placeholder="请选择所属板块">
          <el-option label="新闻动态" value="新闻动态"></el-option>
          <el-option label="平台公告" value="平台公告"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-input v-model="form.pinned"></el-input>
        </el-form-item>
        <el-form-item label="浏览次数">
          <el-input v-model="form.num"></el-input>
        </el-form-item>
        <!-- <el-form-item label="发布时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-col>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addform()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改权限弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogchangeVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form ref="cform" :model="form" label-width="80px">
      
        <el-form-item label="文章标题">
          <el-input v-model="cform.name"></el-input>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-input v-model="cform.type"></el-input>
        </el-form-item>
        <el-form-item label="所属板块">
           <el-select v-model="cform.plate" placeholder="请选择所属板块">
          <el-option label="新闻动态" value="新闻动态"></el-option>
          <el-option label="平台公告" value="平台公告"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-input v-model="cform.pinned"></el-input>
        </el-form-item>
        <el-form-item label="浏览次数">
          <el-input v-model="cform.num"></el-input>
        </el-form-item>
        <!-- <el-form-item label="发布时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-col>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edittable()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 表格 -->
    <el-row>
      <el-table
        ref="multipleTable"
        :data="rechargeList"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="cellStyle"
        :header-cell-style="rowClass"
      >
        <el-table-column label="编号" width="100" prop="id"> </el-table-column>
        <el-table-column prop="name" label="文章标题" width="100">
        </el-table-column>
        <el-table-column prop="plate" label="所属板块" width="100">
        </el-table-column>
        <el-table-column prop="type" label="显示状态" width="100">
        </el-table-column>
        <el-table-column prop="pinned" label="是否置顶" width="100">
        </el-table-column>
        <el-table-column prop="num" label="浏览次数" width="100">
        </el-table-column>
        <el-table-column prop="time" label="发布时间" width="100">
        </el-table-column>
        <el-table-column label="操作" width="300" text-align="center">
          <template slot-scope="scope">
            
            <el-button size="mini" @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10]"
        :page-size="size"
        layout="prev, pager, next, jumper, total, sizes"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        id: "",
        name: "",
        plate: "",
        type: "",
        pinned: "",
        num: "",
        time: "",
      },
      cform: {
        
        name: "",
        plate: "",
        type: "",
        pinned: "",
        num: "",
        time: "",
      },
      dialogchangeVisible:false,
      dialogVisible: false,
      page: 1,
      size: 5,
      rechargeList: [],
      total: 0,
      totalPage: 0,
      search: {
        type: "",
        page: 1,
        size: 5,
        name: "",
        dateRange: "",
        startDate: "",
        endDate: "",
        plate: "",
        consult: "",
      },
      value: "",
    };
  },
  mounted() {
    this.searchData();
  },
  methods: {
    dateFormat(picker) {
      /* 法一 */
      this.search.startDate = picker[0];
      this.search.endDate = picker[1];
      /* 法二 */
      // let startDate = this.params.date.toString()
      // this.params.startTime = startDate.substring(0, 10)
      // this.params.endTime = startDate.substring(11)
    },
    searchData() {
      this.$axios
        .post("/consult/findAll/" + this.page + "/" + this.size)
        .then((res) => {
          let resPage = res.data.data;

          this.page = resPage.curPage;
          this.total = resPage.total;
          this.totalPage = resPage.totalPage;
          this.rechargeList = resPage.data;
        });
    },
    handleSizeChange(val) {
      this.size = val;
      this.searchData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.searchData();
    },
    select() {
      const params = {
        ...this.search,
        page: this.page,
        size: this.size,
      };
      this.$axios.post("/consult/findByCondition", this.search).then((res) => {
        this.rechargeList = res.data.data.data;
        // this.search.page = res.data.data.curPage;
        this.total = res.data.data.total;
      });
    },
   
    handleEdit(row) {
      this.cform.id=row.id
      this.cform.name=row.name
      this.cform.plate=row.plate
      this.cform.type=row.type
      this.cform.pinned=row.pinned
      this.cform.num=row.num
   
      this.dialogchangeVisible = true;
     
    },edittable(row){
      this.$axios.put("/consult/editform/" ,this.cform).then((res) => {
            if (res.data.code == 200) {
              if (res.data.data) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                location.reload();
              }
            }
          });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该资讯, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.delete("/consult/deleterow/" + row.id).then((res) => {
            if (res.data.code == 200) {
              if (res.data.data) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                location.reload();
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return "text-align:center";
    },
    rowClass({ row, rowIndex }) {
      return "text-align:center";
    },
    add() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },addform(){
      this.$axios.post("/consult/addform/",this.form ).then((res) =>{
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.dialogVisible = false
           location.reload();
        }
      })
    }
  },
};
</script>
<style scoped>
.d2 {
  min-width: 100%;
  height: 40px;

  display: flex;
  justify-content: flex-end;
}
</style>